Vuetifyの使い方：実践の前に覚えておいた方がいいこと｜たのしいWeb

Vuetifyを導入したものの、使い方にクセがあって投げ出してしまった方もいるのではないでしょうか。ぼくも今だに試行錯誤しながら使っていますが、何を作る場合でも必要な基本的な知識があります。v-app、v-content、v-container、v-layout、v-flexあたりがそれかなと思います。この記事ではそれらの使い方について解説しています。

VueプロジェクトにVuetifyの導入をまだしていない方はこちらの記事（Vueプロジェクトへのインストール手順）でインストールをして、実際にコードを書きながら読みすすめていただいた方がわかりやすいと思います。

目次

v-appはVeutifyを使うために必須の要素です。Vuetifyのコンポーネントは必ずv-app要素の内側に書く必要があります。v-appで囲まないでVuetifyのコンポーネントを使うと予期しない動作や表示になってしまいます。下記のようにVuetifyのコンポーネントをv-appで囲みます。

Vuetifyを採用する場合、レイアウトシステムを使う方が多いのではないかと思うのですが、こちらのサンプルのようにサイドメニューの表示・非表示にメインコンテンツを連動させる場合はv-contentでコンテンツを囲む必要があります。v-contentで囲まなければメインコンテンツの動きはサイドメニューの動きに連動しなくなります。

v-containerはその名の通りコンテナです。オプション属性がいろいろとあって、fluid属性を付与することで左右いっぱいにコンテナを広げたり、fill-height属性を付与することでv-containerの内部要素を上下中央寄せにしたりできます。

グリッドシステムを使うために必要です。意味としてはと同じです。v-layoutの内側に次に紹介するv-flexを設置することでグリットデザインを実現できます。

v-layoutのポイントとしては、wrap属性を付けることです。wrap属性を付けないとグリットシステムが機能せず、要素が延々と横につながってしまいます。

v-layoutの内側に設置することでグリッドデザインを実現できます。Vuetifyは12分割のグリッドシステムを採用しています。v-flexにxs12、sm6、md4のような属性を与えることでブラウザの幅で可変するようになります。xs12というのはブラウザ幅がxs(600px未満と定義されています)の時12個分のグリッドを使うという意味です。

属性ごとの幅指定は下記のとおりです。

下記のようにv-flexを設定した場合は、表示幅が600px未満のときはv-flex1つについき12カラムを使い、600px以上かつ960px未満のときはv-flex1つにつき6カラムを使い、960px以上1264px未満のときはv-flex1つにつき4カラムを使うという意味になります。